.focus-app {
  &.space-showing {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    overflow: scroll;
  }

  .sound-wave .Line_1 {
    animation: pulse-wave 1s infinite;
    animation-delay: 0.15s;
  }

  .sound-wave .Line_2 {
    animation: pulse-wave 1s infinite;
    animation-delay: 0.3s;
  }
  .sound-wave .Line_3 {
    animation: pulse-wave 1s infinite;
    animation-delay: 0.45s;
  }
  .sound-wave .Line_4 {
    animation: pulse-wave 1s infinite;
    animation-delay: 0.6s;
  }
  .sound-wave .Line_5 {
    animation: pulse-wave 1s infinite;
    animation-delay: 0.75s;
  }
  .sound-wave .Line_6 {
    animation: pulse-wave 1s infinite;
    animation-delay: 0.9s;
  }
  .sound-wave .Line_7 {
    animation: pulse-wave 1s infinite;
    animation-delay: 1.05s;
  }
  .sound-wave .Line_8 {
    animation: pulse-wave 1s infinite;
    animation-delay: 1.2s;
  }
  .sound-wave .Line_9 {
    animation: pulse-wave 1s infinite;
    animation-delay: 1.35s;
  }
}

.focus-space-access-buttons {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 1000;

  .open-space-button {
    @apply btn btn-sm gap-1.5 px-1.5 btn-ghost;
    transition: all 0.3s ease-in-out;

    .ping-notification {
      @apply absolute flex size-3;
      top: -4px;
      left: -4px;
    }
  }

  .open-space-button.open {
    @apply border-primary/50 text-primary bg-base-200;

    &:hover {
      @apply bg-primary/80 border-primary/50 text-primary;
      animation: float 1s ease-in-out infinite;
    }
  }

  .open-space-button.close {
    @apply text-4xl border-0;
    color: color-mix(in srgb, var(--focus-space-color-readable) 40%, transparent);

    &:hover {
      color: color-mix(in srgb, var(--focus-space-color-readable) 90%, transparent);
    }
  }

  .sound-playing-icon {
    @apply rounded-full text-primary/50;
    display: block;
    font-size: 12px;
    position: absolute;
    bottom: -4px;
    left: 4px;
  }

  .pomodoro-running-icon {
    @apply rounded-full text-primary/50;
    display: block;
    font-size: 12px;
    position: absolute;
    top: -4px;
    left: 4px;
  }

  &.space-showing {
    bottom: 0;
    right: 0;
    transition: all 0.6s ease-in;
    transition-delay: 0.3s;
    bottom: calc(100% - 68px);
  }
}


@keyframes float {
  0% {
    box-shadow: 0 3px 10px 0px rgba(0,0,0,0.05);
    transform: translatey(0px);
  }
  50% {
    box-shadow: 0 15px 10px 0px rgba(0,0,0,0.1);
    transform: translatey(-5px);
  }
  100% {
    box-shadow: 0 3px 10px 0px rgba(0,0,0,0.05);
    transform: translatey(0px);
  }
}

@keyframes pulse-wave {
  0% {
    transform: scaleY(1);
    transform-origin: 50% 50%;
  }

  50% {
    transform: scaleY(0.7);
    transform-origin: 50% 50%;
  }

  100% {
    transform: scaleY(1);
    transform-origin: 50% 50%;
  }
}